Description

The modal was using a <div role="dialog"> with a hand-rolled focus trap (sentinel elements + manual focus cycling). The native <dialog> element + showModal() handles focus trapping, top-layer stacking, and modal semantics natively — and is baseline-available in all modern browsers including Safari 15+.

Solution

Replaced the <div> modal container with <dialog> and call showModal() on mount. This eliminates the need for ModalFocusBounds, ModalVisuallyHidden, and all manual focus management code.

Key decisions:

• onCancel prevention: showModal() causes the browser to fire a cancel event on Escape and close the dialog natively. We call e.preventDefault() to keep React state in control — the existing useModal Escape key listener handles state updates.
• Top-layer positioning: showModal() places the element in the browser's top layer with fixed-position semantics, so the explicit position: fixed class on <Modal> is no longer needed and has been removed.
• ModalBackdrop preserved: The native ::backdrop pseudo-element is unused (transparent by default); ModalBackdrop remains as the customizable overlay, positioned absolutely within the full-viewport dialog.
• No public API changes: Modal, ModalBackdrop, ModalContent, and useModal signatures are unchanged.

Deleted (internal, not exported):

• modal-focus-bounds/ — custom circular focus trap sentinels
• modal-visually-hidden/ — visually-hidden cycling elements
• modal.module.scss — .ModalFixed / .ModalAbsolute classes (no longer applied)

CSS reset on <dialog> to neutralise browser defaults:

.modalInner {
  align-items: center;
  background: transparent;
  border: none;
  display: flex;
  height: 100%;
  justify-content: center;
  max-height: 100%;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

Additional Notes

Browser support: <dialog> + showModal() has been baseline-available since Safari 15.4 (March 2022). No polyfill is required for the stated peer dependency range (React 17–19 implies modern browser targets).

The useModal Escape key listener (keyup on window) is intentionally kept — it remains valid for consumers who use useModal independently of <Modal>.

Screenshots

N/A — layout and visual appearance are unchanged.

• Fixes Update to use dialog and showModal #114

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.